<template>
  <div>
    <el-table-form ref="form" class="form" :model="query">
      <el-form-item label="科目编号:" class="merge-item">
        <el-input v-model.trim="query.subjectCode" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="科目名称:" class="merge-item">
        <el-input v-model.trim="query.subjectName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="科目类型:" class="merge-item">
        <el-select v-model="query.subjectFlag" clearable>
          <el-option label="收入" :value="1" />
          <el-option label="支出" :value="2" />
        </el-select>
      </el-form-item>

      <template v-slot:btns>
        <el-button v-permission="1" type="primary" icon="el-icon-search" @click="fetchData({})">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="2" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button v-permission="5" type="primary" icon="" @click="openSetting">资金科目匹配</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchDataLeft"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />

    <add ref="add" @refresh="refresh" />
    <match ref="match" @refresh="refresh" />
  </div>
</template>

<script>
  import { accountSubjectList, accountSubjectDel } from '@/api'
  import { parseTime } from '@/utils'
  export default {
    name: 'CapitalSubject',
    components: {
      add: require('./components/add.vue').default,
      match: require('./components/match.vue').default
    },
    data() {
      return {
        query: {
          subjectCode: null,
          subjectName: null,
          subjectFlag: null
        },
        tableData: {
          total: 0,
          column: [
            { type: 'index' },
            { label: '科目编号', prop: 'subjectCode', width: 200, align: 'center' },
            { label: '科目名称', prop: 'subjectName', width: 200, align: 'center' },
            { label: '科目类型', prop: 'subjectFlag', width: 200, align: 'center',
              render: (h, { row }) => <span>{ row.subjectFlag && row.subjectFlag === 1 ? '收入' : row.subjectFlag === 2 ? '支出' : '' }</span>
            },
            { label: '创建人', prop: 'createUser', width: 200, align: 'center' },
            { label: '创建日期', prop: 'createTime', width: '', align: 'center',
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} ') }</span>
              // render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            { label: '备注', prop: 'remark', width: '', align: 'left' },
            {
              label: '操作',
              align: 'left',
              fixed: 'right',
              width: 85,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link v-permission='3' underline={false} size='mini' onClick={() => this.editRow(row, $index)}>
                     编辑
                    </el-link>
                    <el-link v-permission='4' type='danger' underline={false} size='mini' onClick={() => this.delRow(row, $index)}>
                     删除
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    methods: {
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          ...this.query,
          currentPage,
          pageSize
        }
        const res = await accountSubjectList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
        // this.flexColumnWidth()
      },
      async editRow(row) {
        await this.$refs.add.open(row)
        this.$refs.lbTable.fetch()
      },
      async delRow(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const params = {
            subjectCode: row.subjectCode
          }
          const res = await accountSubjectDel(params)
          if (res.success) {
            this.refresh()
          }
        })
      },
      async add() {
        await this.$refs.add.open()
        this.$refs.lbTable.fetch()
      },
      async openSetting() {
        await this.$refs.match.open()
        this.$refs.lbTable.fetch()
      },
      refresh() {
        this.fetchData({})
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

